<!-- /*
 * @Author: 谢力 843926058@qq.com
 * @Date:   2019-11-06
 * @Last Modified by:   谢力
 * @Last Modified time: 2019-11-07
 */ -->
<template>
    <div class="ui-mode-container ui-mode-box flex-col">
        <!-- 头部 -->
        <div class="ui-header-item gradient">
            <div class="ui-header-arraw prev" @touchstart.stop @click="handleHistory">
                <i class="iconfont icon iconjiantou-zuo-cuxiantiao"></i>
            </div>
            <div class="ui-header-title">解除绑定</div>
            <div class="ui-header-arraw next flex-row align-center" @touchstart.stop @click="handleHome">
                <i class="iconfont icon iconi-home"></i>
            </div>
        </div>
        <div class="ui-mode-content flex1" ref="scroll">
            <template v-if="pageStatus">
                <div class="preview-title">解除绑定</div>
                <div class="mt-item-wrap borderbtm flex-row align-center-row">
                    <div class="mt-item-label">头像</div>
                    <div class="mt-panel-img">
                        <img v-if="public_user_info.weichat_img" class="panel-img" :src="public_user_info.weichat_img">
                        <img v-else class="panel-img" src="@/assets/images/logo.png">
                    </div>
                </div>
                <div class="mt-item-wrap flex-row align-center-row">
                    <div class="mt-item-label required">微信昵称</div>
                    <div class="mt-flex mt-flex-x mt-panel-item align-between-row align-center-row">
                        <div class="mt-panel-item">
                            <input type="tel" v-model="public_user_info.weichat_name" name="msg_content" placeholder="微信昵称" id="code" class="mt-item-input right" />
                        </div>
                    </div>
                </div>
            </template>
        </div>
        <div class="relative buttom-wrap" v-if="pageStatus">
            <div class="buttom">
                <div class="address-sure" @touchstart.stop @click="submit">解除绑定</div>
            </div>
        </div>
    </div>
</template>
<script>
import Validator from '@/utils/validator';
import mixinCommon from '@/views/content/mixins/common';
import mixinRequest from '@/views/content/mixins/request';
export default {
    name: 'my/setting/weChartChange',
    data(){
        return {
            public_agent_info:{},
            public_user_info:{},
        };
    },
    mixins:[
        mixinCommon,
        mixinRequest
    ],
    computed:{
    },
    watch:{
        resourceLoaded:{
            handler(flag){
                flag&&this.$nextTick(this.init);
            },
            immediate:true
        }
    },
    created(){
    },
    mounted(){
    },
    methods:{
        // 初始化
        init(){
            this.getPageInfo({
                name:'my',
                param:{
                    invoke_method:'user_and_shop_info'
                }
            }).then(({result,response})=>{
                this.public_agent_info=result.public_agent_info||{};
                this.public_user_info=result.public_user_info||{};
                this.public_user_info.weichat_name=this.public_user_info.weichat_name?this.public_user_info.weichat_name:'匿名';
                document.title=this.public_agent_info.application_name;
                this.setState({
                    key:'public_agent_info',
                    value:this.public_agent_info
                });
                this.setState({
                    key:'public_user_info',
                    value:this.public_user_info
                });
            });
        },
        // 提交
		submit() { 
            this.$router.replace({
                path:'/my/app/weChartChange',
            });  
        },
        // 请求失败刷新
        handleRefresh(){
            this.init();
        }
    },
    components:{
    },
    beforeDestroy(){

    }
}
</script>

<style lang="less" scoped>
.ui-header-item {
    height:2.35rem;
    line-height:2.35rem;
    background-size: 100% 100%;
}
.ui-header-arraw{
    width: 4.6rem;
    &.next{
        font-size:.91rem;
        color:#FEFEFE;
        line-height:2.35rem;
    }
}
.preview-title{
    padding-left:.85rem;
    height:2.4rem;
    font-size:.75rem;
    color:#878787;
    line-height:2.4rem;
}
.mt-item-wrap{
    position:relative;
    padding:0 .85rem;
    background:#fff;
    &.borderbtm::after {
        position: absolute;
        content: '';
        left: 0;
        bottom: 0;
        right: 0;
        height: 1px;
        background: #eee;
        
    }
    .mt-item-label{
        width:28%;
    }
    .mt-item-main{
        width:60%;
    }
    .mt-panel-item{
        width:100%;
        .mt-item-input{
            text-align:left;
            &.right{
                text-align:right;
            }
        }
    }
    .mt-panel-item:after {
        display:none;
    }
    .mt-panel-img{
        width:100%;
        position: relative;
        height:3.6rem;
        .panel-img{
            position:absolute;
            height:80%;
            right:0;
            top:50%;
            transform:translateY(-50%);
            border-radius:50%;
        }
    }
}
.buttom-wrap{
    position: relative;
    width:100%;
    height:4.37rem;
    background:#FFF;
}
.buttom{
    position:fixed;
    width:100%;
    height:2.67rem;
    padding:.85rem;
    .address-sure{
        width:100%;
        height:2.67rem;
        border-radius:.21rem;
        background:#2398aa ;
        text-align:center;
        line-height:2.67rem;
        font-size:.85rem;
        color:#fff;
    }
}
</style>